<template>
	<view>
		<view style="background: linear-gradient( 180deg, #FFEEEB 0%, #F8F8FA 100%);position: relative;">
			<u-navbar title=" " placeholder bg-color="transparent" :auto-back="true">
				<view slot="left" class="u-flex">
					<u-icon name="arrow-left" size="19"></u-icon>
					
				</view>
			<view slot="center" class="u-flex" style="margin-left: -180rpx;">
				
				<u-search :show-action="false" searchIconColor="#B8BBC3" bgColor="#fff" placeholderColor="#B8BBC3"
					placeholder="请输入商品名称" @search="search" v-model="keyword" style="width: 456rpx;"></u-search>
			</view>
			</u-navbar>
		
		
		
		</view>
			<view class="u-p-30" style="padding-top: 0;">
	<u-gap height="40rpx"></u-gap>
		<view class="u-flex-y-center">
			<image :src="info.image" style="width: 84rpx;height: 84rpx;border-radius: 10rpx 10rpx 10rpx 10rpx;"></image>
			<view style="margin-left: 20rpx;">
				<view class="u-f-28 u-bold">{{info.name}}</view>
				<u-gap height="8rpx"></u-gap>
				<view class="u-flex-y-center">
					<view class="u-flex-y-center" style="padding: 7rpx 12rpx;background: rgba(234,77,68,0.1);border-radius: 20rpx 20rpx 20rpx 20rpx;">
						<image src="/static/xin.png" style="width: 24rpx;height: 24rpx;margin-right: 6rpx;"></image>
						<view style="color: #EA4D44;"  class="u-f-26 u-bold">{{info.star||0}}</view>
					</view>
					<view style="margin-left: 20rpx;font-size: 26rpx;">
						近期服务{{info.sold||0}}人
					</view>
				</view>
			</view>
		</view>
				<u-gap height="40rpx"></u-gap>
		<view class="u-f-32 u-bold">商品列表</view>
		<u-gap height="20rpx"></u-gap>
	
		
			
			<view class="u-bg-fff u-flex-y-center u-flex-around" style="width: 690rpx;padding-top: 28rpx;padding-bottom: 28rpx;border-radius: 10%;">
				<view  class="u-flex-y-center" :class="status==0?'tabAct':'tab'" @click="clickTab(0)" >
				<view >最新</view>
				
				</view>
				<view  class="u-flex-y-center" :class="status==1||status==2?'tabAct':'tab'" @click="clickTab(1)" >
				<view >销量</view>
				<view class="u-flex u-m-l-6" style="flex-direction: column">
					<image :src="status==1?'../../static/uped.png':'../../static/up.png'" style="width: 13.84rpx;height: 9.4rpx;"></image>
					<image  :src="status==2?'../../static/downed.png':'../../static/down.png'" style="width: 13.84rpx;height: 9.4rpx;margin-top: 2rpx;"></image>
				</view>
				</view>
				<view  class="u-flex-y-center" :class="status==3||status==4?'tabAct':'tab'" @click="clickTab(3)" >
				<view >价格</view>
				<view class="u-flex u-m-l-6" style="flex-direction: column">
					<image :src="status==3?'../../static/uped.png':'../../static/up.png'" style="width: 13.84rpx;height: 9.4rpx;"></image>
					<image  :src="status==4?'../../static/downed.png':'../../static/down.png'" style="width: 13.84rpx;height: 9.4rpx;margin-top: 2rpx;"></image>
				</view>
				</view>
			</view>
			
		<u-gap height="20rpx"></u-gap>
		<view class="grid">
			<view  @click="$u.route('/pages/shop/scoreDetail?id='+item.id)" class="u-bg-fff u-r-20" v-for="(item,index) in list" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.06);border: 1rpx solid #F7F7F8;padding-bottom: 20rpx;">
				<image :src="item.image" style="width: 335rpx;height: 198rpx;" mode="aspectFit"></image>
				<view class="u-m-t-14" style="padding: 0 16rpx;">
					<view class="u-f-28 u-bold">{{item.name}}</view>
					<view class="u-f-22 u-m-t-10" style="color: #646464;">原价：￥{{item.old_price}}</view>
					<view class="u-flex " style="color: #EA4D44;align-items: baseline;">
						<block v-if="item.score > 0">
							<view class="u-f-28 u-bold">{{item.score}}</view>
							<view class="u-f-22">积分</view>
							<view class="u-f-22">+</view>
						</block>
						
						<view class="u-f-28 u-bold">{{item.price}}</view>
						<view class="u-f-22">元</view>
					</view>
				</view>
		
			</view>
		</view>
		</view>
		<u-gap height="100rpx"></u-gap>
			
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {	
				user: {},
				
				list: [],
				page: 1,
				status:0,
				list1: [{
					name: '最新',
				}, {
					name: '销量',
				}, {
					name: '价格',
				}],
				id:0,
				info:{},
				keyword:''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getInfo()
			this.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			search(e) {
				
				this.list = []
				this.page = 1
				this.getList()
			},
			clickTab(e){
				if(e==1){
					e = this.status==1?2:1
				}
				if(e==3){
					e = this.status==3?4:3
				}
								this.status = e
								this.list = []
								this.page = 1
								this.getList()
			},
			async getList() {
				if (this.page == -1) {
					return
				}
		
				let res = await uni.$u.http.post('shop/shopList', {
					page: this.page,
		sort: this.status,
		agent_id:this.id
					});
				let ls = getApp().mergePage(res, this.page, this.list);
				this.list = ls.list
				this.page = ls.total
			},
			
			async getInfo() {
				let res = await uni.$u.http.post('shop/agent',{id:this.id});
				this.info = res
		
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F8F8FA;
	}
	.tab {
		font-size: 28rpx;
		color: #141936;
	}
	
	.tabAct {
		font-size: 28rpx;
		font-weight: 400;
		color: #EA4D44;
		position: relative;
	
		&:before {
			content: '';
			border-radius: 4rpx;
			width: 46rpx;
			height: 8rpx;
			bottom: -16rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #EA4D44;
			position: absolute;
		}
	}
	.grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
	}
</style>